<template>
	<view class="work-page">
		<view class="seek">
			<view class="seek-int">
				<u--input placeholder="搜索画面描述" border="none" v-model="value"></u--input>
			</view>
			<view class="seek-icon">
				<u-icon name="search" @click="goshare" color="#000" size="22"></u-icon>
			</view>
		</view>
		<view class="tab">
			<view :class="item.show == true?'tab-item':'active-item'" v-for="(item,index) in List" :key="index"
				@click="pick(index)">
				{{item.text}}
			</view>
		</view>
		<view class="work-img" v-if="type == 'image'">
			<view class="img-item" v-for="(item,index) in list" @click="godetails(item.id)" :key="index">
				<u--image radius="10" :showLoading="true" :src="'http://gpt.szyirxx.com'+item.images[0]"
					width="210rpx" height="210rpx"></u--image>
			</view>
		</view>
		<view class="stutas">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				List: [{
						text: 'AI创作',
						type: 'image',
						show: true
					},
					{
						text: '视频营销',
						type: 'video',
						show: false
					}
				],
				status: 'nomore',
				page: 1,
				type: 'image',
				list: []
			}
		},
		onLoad() {
			this.postlist()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.postlist()
		},
		methods: {
			godetails(id){
				uni.navigateTo({
					url:'/pages/my/works/details/index?id=' + id
				})
			},
			goshare() {
				this.page = 1
				this.postlist()
			},
			postlist() {
				let params = {
					type: this.type,
					desc: this.value,
					page: this.page,
					limit: 20
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/user/getWorksList'
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						if(this.type == 'image'){
							if (res.data.data.data.length < 10) {
								this.status = 'nomore';
							}
							if (this.page == 1) {
								this.list = res.data.data.data
							} else {
								res.data.data.data.map(item => {
									this.list.push(item)
								})
							}
						}else{
							this.status = 'nomore';
							this.list = res.data
						}
						
					}
				})
			},
			pick(index) {
				uni.showLoading({
					mask: true
				})
				this.type = this.List[index].type
				this.page = 1
				this.postlist()
				this.List.map(item => {
					item.show = false
				})
				this.List[index].show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-page {
		padding: 30rpx;

		.seek {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.seek-int {
				width: 85%;
				background-color: #f5f6fa;
				padding: 20rpx;
				border-radius: 40rpx;
			}

			.seek-icon {
				padding: 20rpx;
				border-radius: 50%;
				background-color: #f5f6fa;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.tab {
			display: flex;
			padding: 30rpx 0;

			.tab-item {
				margin-right: 30rpx;
				border-radius: 30rpx;
				background-color: #000;
				color: #ffff;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
			}

			.active-item {
				margin-right: 30rpx;
				border-radius: 30rpx;
				background-color: #ffff;
				color: #999;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				border: 1rpx solid #999;
			}
		}

		.work-img {
			display: flex;
			flex-wrap: wrap;

			.img-item {
				width: 33%;
				justify-content: space-between;
				margin-bottom: 20rpx;
			}
		}

		.stutas {
			padding: 20rpx;
		}
	}
</style>